<template>
  <div class="app-container">
    <!-- 流水单信息 -->
    <h5 class="titleInfo">流水单信息</h5>
    <el-form ref="list" :inline="true" label-width="130px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="流水单号">
            <span class="spanToInput">{{ list.orderSn | filterNull }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="预约单号">
            <span class="spanToInput">{{ list.preOrderSn | filterNull }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="流水单类型">
            <span class="spanToInput">{{ list.type | filterNull }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="预约医院">
            <span class="spanToInput">{{ list.hospitalName | filterNull }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="单数">
            <span class="spanToInput">{{ list.num | filterNull }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="创建日期">
            <span class="spanToInput">{{ list.createdAt | filterNull }}</span>
          </el-form-item>
        </el-col>
        <!-- 新加字段 -->
        <el-col :span="8">
          <el-form-item label="付款方式">{{ list.payment }}</el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!-- 人员信息 -->
    <div class="divBar" />
    <h5 class="titleInfo">人员信息</h5>
    <el-form ref="list" :inline="true" :model="list" label-width="130px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="客户姓名">
            <span class="spanToInput">{{ list.userName | filterNull }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户手机号">
            <span class="spanToInput">{{ list.userPhone | filterNull }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="推荐人姓名">
            <span class="spanToInput">{{ list.serviceName | filterNull }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="推荐人手机号">
            <span class="spanToInput">{{ list.servicePhone | filterNull }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="团队姓名">
            <span class="spanToInput">{{ list.teamUserName | filterNull }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="团队手机号">
            <span class="spanToInput">{{ list.teamUserPhone | filterNull }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="管家姓名">
            <span class="spanToInput">{{ list.butlerRealname | filterNull }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="管家手机号">
            <span class="spanToInput">{{ list.butlerUsername | filterNull }}</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!-- 支付信息 -->
    <div class="divBar" />
    <h5 class="titleInfo">支付信息</h5>
    <el-form ref="list" :inline="true" :model="list" label-width="130px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="扣除杂费金额">
            <span class="spanToInput">{{ list.allPrice | filterNull }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="消费总金额">
            <span class="spanToInput">{{ list.totalPrice | filterNull }}</span>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="12">
          <el-form-item label="现金补贴">
            <span class="spanToInput">{{list.cashAllowance | filterNull}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="积分补贴">
            <span class="spanToInput">{{list.integralAllowance | filterNull}}</span>
          </el-form-item>
        </el-col> -->
        <el-col :span="12">
          <el-form-item label="备注">
            <span class="spanToInput">{{ list.userRemark | filterNull }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="支付凭证">
            <div v-if="list.img.length>0" style="width:160px;float:left">
              <img
                v-for="(i,index) in list.img"
                :key="index"
                style="width:100%"
                :src="i | imgFilter"
                alt
              >
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <!-- 支付信息 -->
    <div class="divBar" />
    <h5 class="titleInfo">支付明细</h5>
    <el-form ref="list" :inline="true" :model="list" label-width="130px">
      <el-row>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="username" align="center" label="支付方式">
            <template slot-scope="scope">
              <div >
                <span v-if="scope.row.payType==1">信用卡快捷支付</span>
                <span v-if="scope.row.payType==2">借记卡快捷支付</span>
                <span v-if="scope.row.payType==3">微信支付</span>
                <span v-if="scope.row.payType==4">支付宝支付</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="tradeNo" align="center" label="交易单号" />
          <el-table-column prop="amount" align="center" label="支付金额" />
          <el-table-column prop="payTime" align="center" label="支付时间" />
        </el-table>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import { policy, getPayedOrderList } from '@/api/policy'
import { getBeautyProjectOrderById } from '@/api/runWaterManage'
export default {
  name: 'RunWaterManageInfo',
  filters: {
    filterNull(e) {
      if (!e) {
        return '暂无'
      } else {
        return e
      }
    },
    imgFilter(e) {
      return localStorage.getItem('imgUrlPrefix') + e
    },
    cardNull(e) {
      return window.helper.cardType(e)
    },
    userFocus(e) {
      return window.helper.userFocus(e)
    }
  },
  data() {
    return {
      userId: '',
      list: {
        img: []
      },
      tableData: []
    }
  },
  mounted() {
    this.userId = String(this.$route.query.userId)
    this.getList()
    this.getinfo()
  },
  methods: {
    getinfo() {
      getPayedOrderList({ id: this.$route.query.sn }).then(res => {
        console.log(res)
        if (res.data.code == 0) {
          this.tableData = res.data.data.list
        }
      })
    },
    getList() {
      const datas = { id: this.userId }
      getBeautyProjectOrderById(datas)
        .then()
        .then(res => {
          console.log(res)
          if (!res.data.code) {
            this.list = res.data.data
          } else {
            this.$message.error(res.data.msg)
          }
        })
        .catch(error => {
          this.$message.error(error)
        })
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 0px !important;
}
.form {
  margin-left: 268px;
}
</style>
